<template>
  <Tabs :animated="true" class="tab-box">
    <TabPane key="widgets">
      <template #tab>
        <Icon :icon="ICON.WIDGETS" />
        Widgets
      </template>
      <WidgetsTable />
    </TabPane>
    <TabPane key="component">
      <template #tab>
        <Icon :icon="ICON.WIDGETS" />
        部件库
      </template>
      <ComponentTable />
    </TabPane>
  </Tabs>
</template>
<script setup lang="ts">
  import { Icon } from '/@/components/Icon';
  import { Tabs, TabPane } from 'ant-design-vue';
  import WidgetsTable from '/@/views/thingsborad/resources/widgets/components/widgetsTable/WidgetsTable.vue';
  import ComponentTable from '/@/views/thingsborad/resources/widgets/components/componentTable/ComponentTable.vue';
  import { ICON } from '/@/enums/iconEnum';
</script>

<style lang="less" scoped>
  html[data-theme='dark'] {
    .tab-box :deep(.ant-tabs-nav) {
      background-color: #000;
    }
  }

  :deep(.ant-tabs-nav) {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 4px;
    background-color: white;
    height: 48px;
  }

  :deep(.ant-tabs-tab) {
    margin-left: 16px;
    margin-right: 16px;
  }

  :deep(.ant-tabs-content-holder) {
    margin-left: 4px;
    margin-right: 4px;
  }
</style>
